<template>
    <Dropdown placement="top">
        <Button>Top Dropdown</Button>
        <template #body>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem disabled>Disabled action</DropdownItem>
            <DropdownDivider />
            <DropdownItem>Separated item</DropdownItem>
        </template>
    </Dropdown>

    <Dropdown placement="bottom">
        <Button>Bottom Dropdown</Button>
        <template #body>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem disabled>Disabled action</DropdownItem>
            <DropdownDivider />
            <DropdownItem>Separated item</DropdownItem>
        </template>
    </Dropdown>

    <Dropdown placement="left">
        <Button>Left Dropdown</Button>
        <template #body>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem disabled>Disabled action</DropdownItem>
            <DropdownDivider />
            <DropdownItem>Separated item</DropdownItem>
        </template>
    </Dropdown>

    <Dropdown placement="right">
        <Button>Right Dropdown</Button>
        <template #body>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem disabled>Disabled action</DropdownItem>
            <DropdownDivider />
            <DropdownItem>Separated item</DropdownItem>
        </template>
    </Dropdown>
</template>
